<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="400"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow
    function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);

        // Draw line
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();

        // Draw arrowhead
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fill();
    }

    // --- Main Drawing ---

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';

    // Define geometry
    const rectW = 200;
    const rectH = 200;
    const rectX = (canvas.width - rectW) / 2;
    const rectY = 80;

    // 1. Draw the rectangle (conductor block)
    ctx.strokeRect(rectX, rectY, rectW, rectH);

    // 2. Draw arrows
    const arrowY1 = rectY + rectH / 3;
    const arrowY2 = rectY + 2 * rectH / 3;
    const arrowLen = 80;
    const gap = 20;

    // External arrows (left)
    drawArrow(ctx, rectX - gap - arrowLen, arrowY1, rectX - gap, arrowY1);
    drawArrow(ctx, rectX - gap - arrowLen, arrowY2, rectX - gap, arrowY2);

    // External arrows (right)
    drawArrow(ctx, rectX + rectW + gap, arrowY1, rectX + rectW + gap + arrowLen, arrowY1);
    drawArrow(ctx, rectX + rectW + gap, arrowY2, rectX + rectW + gap + arrowLen, arrowY2);
    
    // Internal arrows
    const internalArrowLen = 100;
    const internalStartX = rectX + (rectW - internalArrowLen) / 2;
    drawArrow(ctx, internalStartX, arrowY1, internalStartX + internalArrowLen, arrowY1);
    drawArrow(ctx, internalStartX, arrowY2, internalStartX + internalArrowLen, arrowY2);

    // 3. Draw labels
    
    // E₀ labels
    const e0_x_left = rectX - gap - arrowLen - 45;
    const e0_x_right = rectX + rectW + gap + arrowLen + 10;
    const e0_y = rectY + rectH / 2;

    ctx.font = 'bold 30px Arial';
    ctx.fillText('E', e0_x_left, e0_y);
    let textMetrics = ctx.measureText('E');
    ctx.font = '20px Arial';
    ctx.fillText('0', e0_x_left + textMetrics.width, e0_y + 8);

    ctx.font = 'bold 30px Arial';
    ctx.fillText('E', e0_x_right, e0_y);
    textMetrics = ctx.measureText('E');
    ctx.font = '20px Arial';
    ctx.fillText('0', e0_x_right + textMetrics.width, e0_y + 8);

    // Surface charge labels (σₑ)
    const sigma_y = rectY - 20;

    ctx.font = '30px Arial';
    ctx.fillText('-σ', rectX, sigma_y);
    textMetrics = ctx.measureText('-σ');
    ctx.font = '20px Arial';
    ctx.fillText('e', rectX + textMetrics.width, sigma_y + 8);
    
    ctx.font = '30px Arial';
    ctx.fillText('σ', rectX + rectW - 35, sigma_y);
    textMetrics = ctx.measureText('σ');
    ctx.font = '20px Arial';
    ctx.fillText('e', rectX + rectW - 35 + textMetrics.width, sigma_y + 8);

    // Internal current labels (i, j)
    const ij_x = internalStartX + internalArrowLen + 15;
    ctx.font = 'italic 30px Arial';
    ctx.fillText('i', ij_x, arrowY1);
    ctx.fillText('j', ij_x, arrowY2);

    // Caption
    ctx.font = '24px "KaiTi", "STKaiti", sans-serif'; // Use KaiTi font for Chinese
    ctx.textAlign = 'center';
    ctx.fillText('电图 4.1.1', canvas.width / 2, rectY + rectH + 40);

</script>
</body>
</html>